<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/WEB-INF/templates/general.xhtml">

	<ui:define name="title">
		<h:outputText value="Administrator" />
	</ui:define>
	<ui:define name="header">
		<h:outputText value="Administrator" />
	</ui:define>

	<ui:define name="content">
		<!-- 		<f:metadata> -->
		<!-- 			<f:event type="postAddToView" listener="#{uiUtils.greetOnViewLoad}" -->
		<!-- 				update="growlMessages" /> -->
		<!-- 			<f:attribute name="firstName" value="#{user.firstName}" /> -->
		<!-- 			<f:attribute name="lastName" value="#{user.lastName}" /> -->
		<!-- 		</f:metadata> -->

		<h1>Account for #{user.userName} (Administrator).</h1>


		<h:form id="form" prependId="false"
			style="width:90%; margin-left: auto; margin-right: auto;">

			<p:growl id="messages" showDetail="true" />

			<p:dataTable id="dataTable" var="userObj"
				value="#{userService.users}" paginator="true" rows="10"
				editable="true"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="5,10,15" rowKey="#{userObj.id}"
				selection="#{userService.selectedUser}" selectionMode="single">

				<f:facet name="header">  
          			  Users
        		</f:facet>

				<p:ajax event="rowEdit" listener="#{userService.onEdit}"
					update=":form:messages" />
				<p:ajax event="rowEditCancel" listener="#{userService.onCancel}"
					update=":form:messages" />

				<p:column>
					<f:facet name="header">
						<h:outputText value="User ID" />
					</f:facet>
					<h:outputText value="#{userObj.id}" />
				</p:column>

				<p:column headerText="User Name" style="width:20%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{userObj.userName}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{userObj.userName}" style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="First Name" style="width:30%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{userObj.firstName}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{userObj.firstName}" style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Last Name" style="width:30%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{userObj.lastName}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{userObj.lastName}" style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column style="width:10%">
					<p:rowEditor />
				</p:column>

				<!-- 				<p:column> -->
				<!-- 					<f:facet name="header"> -->
				<!-- 						<h:outputText value="Last Name" /> -->
				<!-- 					</f:facet> -->
				<!-- 					<h:outputText value="#{userObj.firstName}" /> -->
				<!-- 				</p:column> -->

			</p:dataTable>

		</h:form>

	</ui:define>

</ui:composition>